<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            html{
                overflow: hidden;
            }
            body{
                background-color: rgb(55, 96, 98);
            }
            .container{
               display: flex;
               align-items: center;
               justify-content: center;
               padding-top: 200px;
            }
            .ball{
                width: 30vh;
                height: 30vh;
                background-color: rgb(255, 255, 255);
                border-radius: 50%;
                position: relative;
                border:4px double white;
                overflow: hidden;
            }
            .ball::after{
                display: block;
                width: 60vh;
                height: 60vh;
                content: "";
                background-color: aqua;
                border-radius: 20vh;
                position: absolute;
                left: 50%;
                top:calc(var(--completion));
                translate: -50% 0;
                animation: spin 5s linear infinite;
            }
            @keyframes spin {
                0%{
                rotate: 0deg;
                }
                100%{
                    rotate: 360deg;
                }
            }
            #text{
                font-size: 123px;
                z-index: 9999;
                position: absolute;
                top:32px;
            }
            .box{
                padding-top: 25px
            }
        </style>
	</head>
	<body>
        <div class="container">
            <div style="position: relative;">
                <div class="ball"></div>
                <div style="display:flex;align-items: center;justify-content: center;">
                    <span id="text"></span>
                </div>
                <div class="box">
                    <input type="range" min="0" max="100" id="completion" onmousemove="myfunction()" style="width: 226px" />
                </div>
            </div>
        </div>
        <script>
            const completion=document.querySelector("#completion").value;
            document.getElementById("text").innerText=completion;
            let container=document.querySelector(".container");
            container.style.setProperty('--completion', 264-completion*2.67 +'px');
            function myfunction(){
                let completion=document.querySelector("#completion").value;
                document.getElementById("text").innerText=completion;
                let container=document.querySelector(".container");
                container.style.setProperty('--completion', 264-completion*2.67 +'px');
            }

        </script>
	</body>
</html>